<template>
  <div class="navHeader">
    <div class="head">
      <el-row class="clear">
        <router-link to="index">
          <el-col :xs="4" :sm="4" :md="8" :lg="8" class="logo">
            <!--<img src="../../static/img/logo.png" alt="">-->
          </el-col>
        </router-link>
        <el-col :xs="24" :sm="15" :md="15" :lg="15" class="ulList">
          <ul class="top-action">
            <li :class="[rootInfo.activeAction.indexOf('index')>=0?'active':'']" @click="jump('index')">首页</li>
            <li :class="[rootInfo.activeAction.indexOf('colloge')>=0?'active':'']" @click="jump('colloge')">浣花书院</li>
            <li :class="[rootInfo.activeAction.indexOf('idea')>=0?'active':'']" @click="jump('idea')">团青智库</li>
            <!--<li :class="[rootInfo.activeAction.indexOf('results')>=0?'active':'']" @click="jump('results')">科研成果</li>-->
            <li :class="[rootInfo.activeAction.indexOf('training')>=0?'active':'']" @click="jump('training')">开班信息</li>
            <li :class="[rootInfo.activeAction.indexOf('contact')>=0?'active':'']" @click="jump('contact')">联系我们</li>
          </ul>
        </el-col>
      </el-row>
      <div class="userWrap">
        <span class="icon-user user"></span>
        <span @click="showLogin" v-show="loginState">登录</span>
        <span class="logout" v-show="logoutState">
          您好 <router-link to="userCenter"><span class="nickName">{{userInfo.NickName}}</span></router-link>
          &nbsp;&nbsp;<span @click="logout" class="logoutWord">注销</span>
        </span>
      </div>

    </div>
    <section class="head_i clear">
      <router-link to="index">
        <div class="logo_i fl">
          <img src="../../static/img/logo(i).png" alt="">
        </div>
      </router-link>

      <div class="menu_iWrap fr clear">
        <!--<span class="icon-menu menu_i fr" @click="showMenu"></span>-->
        <span class="icon-menu menu_i fr"></span>
        <span class="indexPage fr">{{pageName}}</span>
        <span class="icon-user user_i fr" v-show="loginState" @click="showLogin"></span>
        <span class="icon-logout user_i fr" v-show="logoutState" @click="logout"></span>

        <!--<router-link to="userCenter">-->
          <span class="fr nick_i" v-show="showNick">
          <span class="nickName" @click="jump('userCenter')">{{userInfo.NickName}}</span>
        </span>
        <!--</router-link>-->
      </div>
    </section>
    <!--<section class="ul_i" :class="[showUl_i?'ui_i_show':'']">-->
    <section class="ul_i">
      <ul>
        <li :class="[rootInfo.activeAction.indexOf('index')>=0?'active_i':'']" @click="jump('index')">首页</li>
        <li :class="[rootInfo.activeAction.indexOf('colloge')>=0?'active_i':'']" @click="jump('colloge')">浣花书院</li>
        <li :class="[rootInfo.activeAction.indexOf('idea')>=0?'active_i':'']" @click="jump('idea')">团青智库</li>
        <!--<li :class="[rootInfo.activeAction.indexOf('results')>=0?'active_i':'']" @click="jump('results')">科研成果</li>-->
        <li :class="[rootInfo.activeAction.indexOf('training')>=0?'active_i':'']" @click="jump('training')">开班信息</li>
        <li :class="[rootInfo.activeAction.indexOf('contact')>=0?'active_i':'']" @click="jump('contact')">联系我们</li>
      </ul>
    </section>
  </div>
</template>
<script>
  import Login from './../components/Login.vue'
  import Bus from '../assets/bus'

  export default {

    data() {
      return {
        pageName: "",
        showUl_i: false,
        activeInfo: false,
        logoutState: false,
        loginState: true,
        userInfo: {},
        showNick:false
      }
    },
    props: ['rootInfo'],
    components: {
      Login
    },
    methods: {
      logout() {
        localStorage.clear();
        this.logoutState = false
        this.loginState = true
        this.showNick = false
        var url = window.location.href;
        window.location.href= 'http://manage.cdtx.org:81/dist/#/'
//        if (url.indexOf('code=') > -1) {
//          var urlArray = url.split("?")[1].split('&');
//          for (var i = 0; i < urlArray.length; i++) {
//            if (urlArray[i].indexOf("code=") > -1) {
//              url = url.replace(urlArray[i], '?1=1')
//            }
//          }
//        }
//        if (url.indexOf('userCenter') > 0 || url.indexOf('Apply') > 0) {
//          window.location.href = url.split('#')[0] + '#/index';
//          window.location.reload();
//        } else {
//          window.location.reload()
//        }
      },
      getPageName() {
        let hash = window.location.hash;
        if (hash.includes('index')) {
          this.pageName = '首页'
        } else if (hash.includes('colloge')) {
          this.pageName = '浣花书院'
        } else if (hash.includes('idea')) {
          this.pageName = '团青智库'
        } else if (hash.includes('results')) {
          this.pageName = '科研成果'
        } else if (hash.includes('training')) {
          this.pageName = '开班信息'
        } else if (hash.includes('contact')) {
          this.pageName = '联系我们'
        }else if (hash.includes('user')) {
          this.pageName = '个人中心'
        }else if (hash.includes('personal')) {
          this.pageName = '个人中心'
        }
      },
      showLogin() {
        const self = this;
        this.$emit('showLogin', true)
      },
      jump(url) {
        this.$router.push(url)
        //      this.getPageName()
        //      setTimeout(getPageName,200)
        this.timeOut = setTimeout(() => {
          this.getPageName();
        }, 500);
        this.showMenu();
      },
      showMenu() {
        if (this.showUl_i) {
          this.showUl_i = false
        } else {
          this.showUl_i = true
        }
      },
    },
    created() {
      var self = this;
      Bus.$on('showNameFn', val => {
        self.logoutState = val
      });
      Bus.$on('closeNameFn', val => {
        self.loginState = val
      });
      Bus.$on('getUserInfo', val => {
        self.userInfo = val
      })
    },
    mounted: function () {
      this.pageName = '首页'
      this.getPageName();
      if (this.rootInfo.activeAction.indexOf('activeInfo') >= 0) {
        this.activeInfo = true
      }

      var self = this
      if (self.$bw.getStorage('userInfo')&&self.$bw.getStorage('userInfo').AccessToken!=null&&self.$bw.getStorage('userInfo').AccessToken!='') {
        self.logoutState = true
        self.loginState = false
        self.showNick = true
        self.userInfo = self.$bw.getStorage('userInfo');
      }
    },
  }

</script>
<style scoped lang="less">
  .navHeader {
    width: 100%;
    box-shadow: 0 0 1.14rem 0 rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 2;
    .head {
      height: 7.86rem;
      position: relative;
      width: 100%;
    }
    .logo {
      height: 6.36rem;
      margin: 0.79rem 0 0.71rem 0rem;
      font-size: 0;
      /*线上*/
      background: url("/dist/static/img/logo.png") no-repeat 0px 0px;
      /*线下*/
      /*background: url("/static/img/logo.png") no-repeat 0px 0px;*/
      background-size: 100% 100%;
    }

    .logo img {
      max-width: 19.36rem;
      max-height: 6.36rem;
      position: absolute;
      top: 1.5rem;
    }

    .introduce {
      height: 3rem;
      font-size: 1.3rem;
      font-family: FZCQK--GBK1-0;
      color: @headerFont;
      line-height: 1.5rem;
      margin: 2.86rem 0 2rem 0.93rem;
      word-break: break-all;
    }

    .ulList {
      float: right;
      height: 7.86rem;
      text-align: right;
      .el-menu {
        margin-top: 2.86rem;
        margin-left: 5rem;
      }
    }

    .el-menu-item.is-active {
      color: #F37D0A;
    }

    el-menu--horizontal .el-submenu {
      float: left;
      position: relative;
      padding-left: 1rem;
    }

    .userWrap {
      position: absolute;
      right: 7.95rem;
      top: 1rem;
      width: 20rem;
      height: 2rem;
      line-height: 2rem;
      /*text-align: center;*/
      text-align: right;
      .user {
        font-size: 1rem;
        color: #53300F;
      }
      span {
        cursor: pointer;
        color: #53300F;
      }
      .logoutWord {
        color: #53300f;
        cursor: pointer;
      }
    }

    .top-action {
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      font-size: 1.14rem;
      color: #333;
      li {
        display: inline-block;
        cursor: pointer;
        margin-right: 3rem;
        padding-bottom: 1rem;
        position: relative;
        font-size: 1.14rem;
        
        color: rgba(83, 48, 15, 1);
      }
      li:after {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        content: '';
        border-bottom: solid 2px #F37D0A;
        display: inline-block;
        transform: scale3d(0, 1, 1);
        transition: all 0.3s;
      }
      li:last-child {
        margin-right: 8rem;
      }
      li:hover {
        color: #F37D0A
      }
      li.active:after {
        transform: scale3d(1, 1, 1);
      }
    }
  }

  .head_i {
    width: 100%;
    height: 1.06rem;
    display: none;
    /*box-shadow: 0 0 0.66rem 0 rgba(0,0,0,0.16);*/
  }

  .logo_i {
    width: 40%;
    height: 100%;
    img {
      display: block;
      max-width: 2.28rem;
      max-height: 0.74rem;
      margin-top: 0.15rem;
      margin-left: 0.15rem;
    }
  }

  .menu_iWrap {
    width: 60%;
    height: 100%;
    line-height: 1.06rem;
  }

  .menu_i {
    color: #3E3A39;
    padding-right: 0.05rem;
    font-size: 0.4rem;
    cursor: pointer;
  }

  .indexPage {
    font-size: 0.24rem;
    font-family: PingFang-SC-Bold;
    color: rgba(84, 84, 84, 1);
    padding-right: 0.1rem;
  }

  .user_i {
    color: #3E3A39;
    font-size: 0.3rem;
    padding-right: 0.18rem;
  }
  .nick_i{
    display: block;
    font-size: .3rem;
    font-family: PingFang-SC-Bold;
    color: rgba(84, 84, 84, 1);
    padding-right: 0.18rem;
    height: 100%;
    width: 1.8rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    text-align: right;
    a,span{
      display: block;
      width: 1.8rem;
      height: 100%;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
  }

  @media screen and (min-width: 829px) {
    .ul_i {
      display: none;
    }
  }

  .ul_i {
    z-index: 9;
    width: 2.4rem;
    height: 4.2rem;
    background-color: white;
    position: fixed;
    right: 0.3rem;
    top: 1.2rem;
    box-shadow: 0 0 46px 0 rgba(0, 0, 0, 0.2);
    display: none;
    ul {
      z-index: 99;
    }
  }

  .ui_i_show {
    transform: rotateX(0deg);
  }

  .ul_i li {
    /*width:100%;*/
    z-index: 9;
    height: 0.32rem;
    font-size: 0.32rem;
    font-family: PingFang-SC-Medium;
    line-height: 0.32rem;
    text-align: center;
    margin-top: 0.43rem;
    cursor: pointer;
  }

  .ul_i li:hover {
    color: rgba(253, 157, 64, 1);
    border-right: 0.06rem solid #FD9D40;
  }

  .active_i {
    color: rgba(253, 157, 64, 1);
    border-right: 0.06rem solid #FD9D40;
  }

  @media screen and (max-width: 829px) {
    .head {
      display: none !important;
    }

    .head_i {
      display: block !important;
    }
  }
</style>
